<template>
	<div class="home">
		<div class="box_header">

			<!-- <router-link to="/home">主页</router-link>
			<router-link to="/home/detail">商品详情</router-link>
			<router-link to="/home/cart">购物车</router-link>
			<router-link to="/adm">切换到后台</router-link> -->
			<el-menu mode="horizontal" default-active="/home" active-text-color="black" :router="true">
				<h3>韭菜买家端-导航栏位置</h3>
				<el-menu-item index="/home" style="height: 80px;line-height: 80px;">主页</el-menu-item>
				<el-menu-item index="/home/detail" style="height: 80px;line-height: 80px;">商品详情</el-menu-item>
				<el-menu-item index="/home/cart" style="height: 80px;line-height: 80px;">购物车</el-menu-item>
				<el-menu-item index="/home/order" style="height: 80px;line-height: 80px;">我的订单</el-menu-item>
				<el-menu-item index="/home/message" style="height: 80px;line-height: 80px;">个人信息设置</el-menu-item>
				<!-- <el-menu-item index="/adm" style="height: 80px;line-height: 80px;">切换到后台</el-menu-item> -->

				<el-avatar :size="50" v-if="bol != 0">
					<img :src="`${$Imgurl}/api/public/showImg/${imgs}`">
				</el-avatar>
				<el-avatar v-if="bol == 0">
					
				</el-avatar>
				<el-button type="text" @click="dialogTableVisible = true">{{random}}</el-button>
				<el-button type="text" @click="toExit()" style="margin-left: 5%;">退出</el-button>
			</el-menu>
			<div class="backgrounds"></div>
			<el-dialog v-model="dialogTableVisible" title="登录">
				<el-form ref="form" :model="form" label-width="150px">
					<el-form-item label="账号">
						<el-input placeholder="请输入账号" type="text" v-model="form.username"></el-input>
					</el-form-item>
					<el-form-item label="密码">
						<el-input placeholder="请输入密码" type="password" v-model="form.password"></el-input>
					</el-form-item>
					<span>
						<el-button @click="dialogTableVisible = false" style="margin-right: 5%;">取消</el-button>
						<el-button type="primary" @click="logins()" style="margin-right: 5%;">确定</el-button>
						<el-button type="text" @click="randoms()">切换至注册</el-button>
					</span>
				</el-form>
			</el-dialog>
			<!-- 注册 -->
			<el-dialog v-model="register" title="注册">
				<el-form ref="obj" :model="obj" label-width="150px">
					<el-form-item label="账号">
						<el-input placeholder="请输入账号" type="text" v-model="obj.account"></el-input>
					</el-form-item>
					<el-form-item label="密码">
						<el-input placeholder="请输入密码" type="password" v-model="obj.password"></el-input>
					</el-form-item>
					<el-form-item label="昵称">
						<el-input placeholder="请输入昵称" type="text" v-model="obj.nickname"></el-input>
					</el-form-item>
					<el-form-item label="电话">
						<el-input placeholder="请输入电话" type="text" v-model="obj.phone"></el-input>
					</el-form-item>
					<span>
						<el-button @click="dialogTableVisible = false" style="margin-right: 5%;">取消</el-button>
						<el-button type="primary" @click="logins2()" style="margin-right: 5%;">确定</el-button>
						<el-button type="text" @click="randoms()">切换至登录</el-button>
					</span>
				</el-form>
			</el-dialog>
		</div>
		<router-view></router-view>
	</div>
</template>

<script>
	// 引入拦截器
	import instance from '@/ajax/index.js';
	export default {
		name: 'Home',
		data() {
			return {
				dialogTableVisible: false,
				// dialogFormVisible: false,
				register : false,
				random: '未登录',
				imgs: '',
				// imgs : 'https://img1.baidu.com/it/u=330974811,1760706812&fm=26&fmt=auto',
				form: {
					username: '',
					password: '',
					grant_type: 'password', // 获取token采用密码模式
					client_id: 'sobook4', // 应用ID
					client_secret: '444444' // 秘钥
				},
				obj : {
					account: '',
					password: '',
					nickname : '',
					phone : ''
				},
				bol : 0,
				indexss : ''

			}
		},
		methods: {
			randoms(){
				this.register = !this.register;
				this.dialogTableVisible = !this.dialogTableVisible;
				
			},
			logins() {
				// 备份
				let that = this;
				// 将即将post请求的数据,通过qs插件进行格式转换
				let login = this.$qs.stringify(this.form);
				// 发起post请求
				/*http://127.0.0.1:8093/oauth/token
					请求地址:	http://127.0.0.1:8093/oauth/token
					提交的数据:	qs打包成JSON字符串
					配置请求头/表头headers	application/x-www-form-urlencoded
				*/
				// console.log(login);
				this.axios.post('/oauth/token', login, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then((res) => {
					// console.log(res);
					// 将请求成功的token存入本地存储中
					localStorage.setItem('token', res.data.access_token);

					instance.get('http://127.0.0.1:8093/api/info/getUser').then((res) => {
						// console.log(res.data);
						that.indexss = res.data.img;
						localStorage.setItem('nickname', res.data.nickname);
						localStorage.setItem('account', res.data.account);
						localStorage.setItem('role', res.data.role);
						localStorage.setItem( 'img' , this.indexss );
						this.random = res.data.nickname;
						this.imgs = localStorage.getItem('img');
						// this.imgs = 'https://img1.baidu.com/it/u=330974811,1760706812&fm=26&fmt=auto';
						this.dialogTableVisible = false;
						if (res.data.closed == 0) {
							if (res.data.role == 'G') {
								that.$router.push('/adm');
								this.$message.success({
									message:"登录成功"
								})
								this.form.username = '';
								this.form.password = '';
								this.bol = 1;
								return;
							}
							if (res.data.role == 'P') {
								that.$router.push('/home');
								this.$message.success({
									message:"登录成功"
								})
								this.obj.account = '';
								this.obj.password = '';
								this.obj.nickname = '';
								this.obj.phone = '';
								this.bol = 1;
								return;
							}
						} else {
							this.$message.warning({
								message:"账号已冻结"
							})
						}
						// if( res.data.closed != 0 ){
						// 	if( res.data.role == 'G' ){
						// 		that.$router.push( '/adm' );
						// 		return;
						// 	}
						// 	if( res.data.role == 'P' ){
						// 		that.$router.push( '/home' );
						// 		return;
						// 	}
						// }else if(res.data.closed == 0){
						// 	this.$message.warning({
						// 		message : '账号冻结了',
						// 		offset : 800
						// 	});
						// }

					}).catch((error) => {
						console.log(error);
					})

				}).catch((error) => {
					console.log(error);
				});


			},
			logins2(){
				this.axios.post( 'http://localhost:8093/api/public/addUser' , this.obj , {
					headers : { 'Content-Type' : 'application/json' }
				} ).then( (res)=>{
					// console.log(res);
					this.register = false;
				} ).catch( (error)=>{
					console.log(error);
				} );
			},
			toExit() {
				this.imgs = '';
				this.random = '未登录';
				localStorage.setItem('nickname', '');
				localStorage.setItem('account', '');
				localStorage.setItem('role', '');
				localStorage.setItem('token', '');
				this.bol = 0;
				this.$router.push('/home');
			}
		}
	}
</script>

<style scoped>
	a {
		text-decoration: none;
		color: black;
	}

	.home {
		width: 100%;
		position: relative;
	}

	.home .box_header h3 {
		width: 35%;
		line-height: 0px;
		margin-top: 35px;
		float: left;
		/* margin-right: 10%; */
	}

	.home .box_header {
		width: 100%;
		height: 80px;
		font-size: 25px;
		text-align: center;
		position: fixed;
		top: 0;
		z-index: 999;
		background-color: white;
		/* background-color: skyblue; */
		/* position: relative; */
	}

	.home .box_header a {
		margin-left: 1%;
		margin-right: 1%;
	}

	.el-menu--horizontal {
		width: 100%;
		height: 80px;
		margin: 0 auto;
		float: left;
		z-index: 9999;
	}

	.el-avatar {
		float: left;
		margin-left: 25px;
		margin-right: 5px;
		margin-top: 15px;
	}

	.el-input {
		margin-left: 10px;
		width: 400px;
	}

	.home .el-form-item :deep(.el-form-item__label) {
		text-align: center;
		margin-left: 15%;
	}

	.home .el-form-item :deep(.el-form-item__content) {
		flex: 0;
	}
</style>
